<template>
	<view class="cuisine-page">
		<z-paging ref="paging" v-model="productList" @query="queryList" :auto="true">
			<!-- 固定内容放在slot="top"中 -->
			<view slot="top">
				<view class="sys-head" :style="{ height: sysHeight()+'px' }"></view>
				<u-navbar placeholder bgColor="#9a0405">
					<view class="navbar-title" slot="left">
						<view class="logo-section">
							<view class="logo">
								<image src="/static/logo.png" mode="aspectFit" class="logo-image"></image>
							</view>
							<text class="app-title">筷享生活</text>
						</view>
					</view>
				</u-navbar>

				<!-- 搜索栏 -->
				<view class="search-section">
					<view class="search-bar">
						<u-search placeholder="搜索美食" :showAction="false" :disabled="true" @click="toSearch"
							shape="round" height="68rpx" bgColor="#FFFFFF" placeholderColor="#999999"></u-search>
						<view class="" @click="toSearch" style="width: 100%;height: 68rpx;position: absolute;top:0%">
						</view>
					</view>
					<view class="cart-icon" @click="toCart">
						<u-icon name="shopping-cart" size="40" color="#FFFFFF"></u-icon>
					</view>
				</view>

				<!-- 轮播图 -->
				<view class="banner-section">
					<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
						class="banner-swiper">
						<swiper-item v-for="(item, index) in bannerList" :key="index">
							<view class="banner-item">
								<image :src="item.picture" mode="aspectFill" class="banner-image"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>

				<!-- 分类标签 -->
				<view class="category-section">
					<u-tabs :list="categoryList" @click="onCategoryChange" :current="currentCategory"
						lineColor="#DB0000" lineWidth="62rpx" lineHeight="8rpx" :activeStyle="{
							color: '#DB0000',
							fontSize: '32rpx',
							transform: 'scale(1.05)'
						}" :inactiveStyle="{
							color: '#999999',
							fontSize: '32rpx',
							transform: 'scale(1)'
						}"></u-tabs>
				</view>
			</view>

			<!-- 商品列表内容 -->
			<view class="product-grid">
				<view class="product-item" v-for="(item, index) in productList" :key="index"
					@click="toProductDetail(item)">
					<view class="product-image">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="product-info">
						<text class="product-name">{{ item.name }}</text>
						<view class="price-section">
							<view class="price-info">
								<text class="currency">￥</text>
								<text class="current-price">{{ item.price }}</text>
								<!-- <text class="original-price">￥{{ item.originalPrice }}</text> -->
							</view>
							<view class="member-tag" v-if="item.vipPrice">
								会员价 ¥{{item.vipPrice}}
							</view>
						</view>
						<view class="product-footer">
							<text class="sales">销量:{{ item.saleCount }}</text>
							<!-- <view class="add-btn" @click.stop="addToCart(item)">
								<u-icon name="plus" size="32rpx" color="#FFFFFF"></u-icon>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		getProductList
	} from '@/api/mall.js'
	import {
		getBannerList
	} from '@/api/home.js'
	import {
		categoryList
	} from '@/api/index.js'

	export default {
		data() {
			return {
				// 轮播图数据
				bannerList: [],
				// 分类数据
				categoryList: [],
				currentCategory: 0,
				// 商品列表
				productList: []
			}
		},
		onLoad() {
			// 页面加载逻辑
			this.loadBannerData()
			// 先加载分类数据，再加载商品列表
			this.loadCategoryData()
		},
		methods: {
			// 加载商品列表

			queryList(pageNo, pageSize) {
				// 构建查询参数
				const params = {
					pageNo: pageNo,
					pageSize: pageSize,
					categoryId: this.currentCategory ? this.categoryList[this.currentCategory].id : ''
				};
				// 调用API获取商品列表
				getProductList(params).then(res => {
					if (res.code == 200) {
						this.$refs.paging.complete(res.data.records || [])
					} else {
						this.$refs.paging.complete([])
					}
				}).catch(err => {
					console.error('获取商品列表失败:', err)
					this.$refs.paging.complete([])
				})
			},
			onCategoryChange(item) {
				this.currentCategory = item.index
				// 重新加载商品列表，传递对应的分类ID
				if (this.$refs.paging) {
					this.$refs.paging.reload()
				}
			},

			// 加载轮播图数据
			loadBannerData() {
				getBannerList({
					position: 3
				}).then(res => {
					if (res.code == 200) {
						this.bannerList = res.data
					}
				}).catch(err => {
					console.error('加载轮播图失败:', err)
				})
			},

			// 加载分类数据
			loadCategoryData() {
				// 获取商品分类 (type=1)
				categoryList({
					type: 1
				}).then(res => {
					if (res.code == 200 && res.data) {
						// 添加"全部"选项到分类列表开头
						this.categoryList = [{
								id: '',
								name: '全部'
							},
							...res.data.map(item => ({
								id: item.id,
								name: item.name
							}))
						];
						console.log('商城页面分类数据加载完成:', this.categoryList);

						// 分类数据加载完成后，触发商品列表加载
						if (this.$refs.paging) {
							this.$refs.paging.reload();
						}
					}
				}).catch(err => {
					console.error('加载分类失败:', err);
					// 保持默认分类数据
				});
			},

			// 加载商品列表
			loadProductList() {
				if (this.$refs.paging) {
					this.$refs.paging.reload()
				}
			},

			// 跳转搜索
			toSearch() {
				uni.navigateTo({
					url: '/pagesB/search/search'
				})
			},

			// 跳转购物车
			toCart() {
				uni.navigateTo({
					url: '/pagesB/cart/cart'
				})
			},

			// 跳转商品详情
			toProductDetail(item) {
				uni.navigateTo({
					url: `/pagesB/productdetail/productdetail?id=${item.id}`
				})
			},

			// 添加到购物车
			addToCart(item) {
				uni.showToast({
					title: '已添加到购物车',
					icon: 'success'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cuisine-page {
		min-height: 100vh;
		background-color: #F5F5F5;
	}

	.sys-head {
		background-color: #9A0506;
	}

	// 顶部导航
	.navbar-title {
		background-color: #9A0506;

		.logo-section {
			display: flex;
			align-items: center;
			gap: 16rpx;

			.logo {

				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.logo-image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 20rpx;
					margin-right: 20rpx;
				}
			}

			.app-title {
				font-size: 40rpx;
				color: #FFFFFF;
				font-weight: 400;
				line-height: 0.9em;
			}
		}
	}

	// 搜索栏
	.search-section {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #9A0506;
		gap: 20rpx;

		.search-bar {
			flex: 1;
			position: relative;
		}

		.cart-icon {
			width: 52rpx;
			height: 52rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	// 轮播图
	.banner-section {
		height: 300rpx;
		margin: 20rpx;

		.banner-swiper {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
			overflow: hidden;
		}

		.banner-item {
			position: relative;
			width: 100%;
			height: 100%;

			.banner-image {
				width: 100%;
				height: 100%;
			}

			.banner-content {
				position: absolute;
				left: 40rpx;
				bottom: 40rpx;

				.banner-title {
					display: block;
					font-size: 60rpx;
					color: #FFFFFF;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.banner-tags {
					display: flex;
					gap: 20rpx;

					.tag {
						padding: 8rpx 16rpx;
						background-color: rgba(255, 255, 255, 0.2);
						border-radius: 20rpx;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	// 分类标签
	.category-section {
		background-color: #FFFFFF;
		padding: 0 20rpx;
	}

	// 商品列表
	.product-grid {
		width: 100%;
		height: 100%;
		display: grid !important;
		grid-template-columns: repeat(2, 1fr);
		// gap: 20rpx;
		column-gap: 25rpx;
		row-gap: 25rpx;
		padding: 30rpx 30rpx;

		.product-item {
			width: 100%;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

			.product-image {
				width: 100%;
				height: 344rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.product-info {
				padding: 20rpx;

				.product-name {
					display: block;
					font-size: 26rpx;
					color: #262626;
					line-height: 1.4;
					margin-bottom: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.price-section {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;

					.price-info {
						display: flex;
						align-items: baseline;

						.currency {
							font-size: 26rpx;
							color: #D91A1A;
							font-weight: 400;
						}

						.current-price {
							font-size: 36rpx;
							color: #D91A1A;
							font-weight: 400;
							margin-right: 20rpx;
						}

						.original-price {
							font-size: 24rpx;
							color: #A6A6A6;
							text-decoration: line-through;
						}
					}

					.member-tag {
						background: linear-gradient(0deg, #FED590 0%, #FFE8BA 100%);
						border-radius: 8rpx;
						padding: 4rpx 12rpx;
						font-size: 22rpx;
						color: #9C5F1F;
						white-space: nowrap;
					}
				}

				.product-footer {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.sales {
						font-size: 22rpx;
						color: #999999;
					}

					.add-btn {
						width: 40rpx;
						height: 40rpx;
						background-color: #DB0000;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
</style>